<template>
  <div class="spec">
    <!-- <z-button icon="add" @click="onAdd">新增{{ ['业务单', '采购单', '生产单'][spec.tabs - 1] }}</z-button> -->
    <el-tabs v-model="spec.tabsValue" tab-position="top" @tab-change="tabHandleChange">
      <el-tab-pane :label="item.label" :name="item.value" v-for="item in spec.tabs" :key="item.value">
        <!-- {{ spec.tabsValue }} -->
      </el-tab-pane>
      <ul class="header-buttons">
        <li>
          <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button>
          <z-button icon="add" @click="onAdd" v-if="purview(2)">新增</z-button>
          <z-button icon="delete" type="danger" :disabled="!table.selection.length"
            @click="onDel(table.selection.map(r => r.id))" v-if="purview(4)">
            删除
          </z-button>
        </li>
        <li class="dis-flex">
          <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="支持名称模糊搜索" clearable
            class="mr-10"></el-input>
          <columnSetting v-model="table.columns" name="CustomProductSpec/GetPage" />
        </li>
      </ul>
      <el-table :data="table.data" class="flexible-table" border stripe @selection-change="onTableChange">
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column v-for="(item, index) in table.columns.filter(r => r.show)" :prop="item.id" :label="item.label"
          :key="item.id + index" align="center">
          <template #default="scope">
            <template v-if="item.id === 'operate'">
              <z-button icon="xiugai" size="small" title="编辑" @click="onEdit(scope.row)" v-if="purview(3)"></z-button>
              <z-button icon="delete" type="danger" size="small" title="删除" @click="onDel([scope.row.id])"
                v-if="purview(4)"></z-button>
            </template>
            <template v-else-if="['isEnable', 'isRequired'].includes(item.id)">
              <el-switch v-model="scope.row[item.id]" :active-value="true" :inactive-value="false"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                @change="onSwitchChange(scope.row.id, item)" />
            </template>
            <template v-else>
              {{ scope.row[item.id] }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="flexible-pagination">
        <el-pagination v-model:current-page="params.pageIndex" v-model:page-size="params.pageSize"
          :page-sizes="[10, 30, 60, 100]" background layout="total, sizes, prev, pager, next, jumper"
          :total="table.totalCount" @size-change="handleSizeChange" @current-change="pageQuery" />
      </div>
      <specEdit v-model="status.show" @onSave="onSaveCallback" :editData="status.editData" />
    </el-tabs>
  </div>
</template>

<script setup>
import { specOptions } from '@/config/data';
import specEdit from './components/specEdit.vue';
import { post } from '@/api/index';
let { purview } = inject('$global');
let $message = inject('$message');
let table = reactive({
  columns: [
    { label: '名称', id: 'label', show: true },
    { label: '规格类型', id: 'specTypeName', show: true },
    { label: '默认值', id: 'defaultValue', show: true },
    { label: '是否启用', id: 'isEnable', show: true },
    { label: '是否必填', id: 'isRequired', show: true },
    { label: '备注', id: 'note', show: true },
    { label: '操作', id: 'operate', show: true }
  ],
  data: [],
  totalCount: 0,
  selection: []
});
let status = reactive({
  show: false,
  editData: {}
});
let params = reactive({
  pageIndex: 1,
  pageSize: 30,
  customType: 1,
  keyword: ''
});
let router = useRouter();
let spec = reactive({
  tabs: [
    //
    { label: '产品', value: 1 },
    { label: '客户', value: 2 },
    { label: '供应商', value: 3 },
    { label: '采购单', value: 4 },
    { label: '业务单', value: 5 },
    { label: '生产单', value: 6 },
    { label: '请购单', value: 7 }
  ],
  tabsValue: 1
});

const tabHandleChange = async (val) => {
  console.log("tabVal", val)
  params.customType = val;
  params.pageIndex = 1;
  pageQuery();
};

const pageQuery = async () => {
  let { result } = await post('CustomProductSpec/GetPage', params);
  table.data = result.items.map(r => {
    return {
      ...r,
      ...{
        specTypeName: specOptions.find(n => n.id === r.specType).label
      }
    };
  });
  if (result.columnJson) table.columns = JSON.parse(result.columnJson);
  table.totalCount = result.totalCount;
};

const onAdd = () => {
  status.editData = { customType: spec.tabsValue };

  status.show = true;
};
const onEdit = val => {
  status.editData = {
    ...val,
    ...{ customType: spec.tabsValue }
  };
  status.show = true;
};
const onDel = async val => {
  await post('Role/BulkDelete', { ids: val });
  $message.success('删除成功');
  pageQuery();
};
// 创建 保存 回调
const onSaveCallback = () => {
  pageQuery();
  status.show = false;
};
const onTableChange = val => {
  table.selection = val;
};
const onSwitchChange = async (id, item) => {
  const obj = { isEnable: '/UpdateEnable', isRequired: '/UpdateRequired' };
  await post(`CustomProductSpec${obj[item.id]}`, {
    id
  });
  $message.success('修改状态成功');
};
const handleSizeChange = val => {
  params.pageIndex = 1;
  pageQuery();
};
// 初始化
onActivated(() => {
  pageQuery();
});
// const onAdd = () => {
//   router.push({
//     path: 'flowEdit',
//     query: { type: spec.tabs }
//   });
// };
</script>

<style lang="scss" scoped>
.spec {
  height: 100%;
  background-color: #fff;
  padding: 10px;

  .header-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
}
</style>
